<template>
    <view class="container">
        <NavBar title="审批详情" @back="goBack" />
        <scroll-view class="list" scroll-y>
            <view class="list-item">
                <view class="item-title">
                    审配意见
                </view>
                <view class="item-content select">
                    <view class="pass">
                        <view :class="{ 'unselected': !isPass }">
                            通过
                        </view>
                        <view class="select-icon" v-show="isPass">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                fill="none" version="1.1" width="15.909899711608887" height="11.195899963378906"
                                viewBox="0 0 15.909899711608887 11.195899963378906">
                                <g>
                                    <path
                                        d="M5.89254,8.83885C5.89254,8.83885,14.7314,0,14.7314,0C14.7314,0,15.9099,1.17852,15.9099,1.17852C15.9099,1.17852,5.89254,11.1959,5.89254,11.1959C5.89254,11.1959,0,5.3033,0,5.3033C0,5.3033,1.17851,4.1248,1.17851,4.1248C1.17851,4.1248,5.89254,8.83885,5.89254,8.83885C5.89254,8.83885,5.89254,8.83885,5.89254,8.83885Z"
                                        fill-rule="evenodd" fill="#165DFF" fill-opacity="1" />
                                </g>
                            </svg>
                        </view>
                    </view>
                    <view class="pass">
                        <view :class="{ 'unselected': isPass }">
                            不通过
                        </view>
                        <view class="select-icon" v-show="!isPass">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                fill="none" version="1.1" width="15.909899711608887" height="11.195899963378906"
                                viewBox="0 0 15.909899711608887 11.195899963378906">
                                <g>
                                    <path
                                        d="M5.89254,8.83885C5.89254,8.83885,14.7314,0,14.7314,0C14.7314,0,15.9099,1.17852,15.9099,1.17852C15.9099,1.17852,5.89254,11.1959,5.89254,11.1959C5.89254,11.1959,0,5.3033,0,5.3033C0,5.3033,1.17851,4.1248,1.17851,4.1248C1.17851,4.1248,5.89254,8.83885,5.89254,8.83885C5.89254,8.83885,5.89254,8.83885,5.89254,8.83885Z"
                                        fill-rule="evenodd" fill="#165DFF" fill-opacity="1" />
                                </g>
                            </svg>
                        </view>

                    </view>
                </view>
            </view>
            <view class="list-item">
                <view class="item-title opinion">
                    {{ parsedData.deptName }}意见
                </view>
            </view>
            <uv-textarea disabled class="textarea textareaStyle" maxlength='100' v-model="remarks" count></uv-textarea>
            <view class="list-item">
                <view class="item-title">
                    手写签名
                </view>
            </view>
            <img style="width: 750rpx ;height: 456rpx;background-color: #fff;" :src="imgSrc" alt="">

        </scroll-view>
    </view>

</template>

<script>
import NavBar from '@/components/NavBar/index.vue'
import { getExamine } from '@/utils/app.js'
export default {
    components: { NavBar },
    data() {
        return {
            remarks: '',
            isPass: true,
            parsedData: {},
            imgSrc: '',
        };
    },
    onLoad(options) {
        this.parsedData = JSON.parse(decodeURIComponent(options.data))

        console.log(this.parsedData, 9);
        this.getExamineData()

    },
    methods: {
        onPullDownRefresh() {
            this.getExamineData()
        },
        getExamineData() {
            getExamine(
                { id: this.parsedData.id }
            ).then(res => {
                console.log(res, 'res');
                if (res && res.code == 200) {
                    this.imgSrc = res.data.autograph;
                    this.isPass = res.data.status == '1' ? true : false;
                    this.remarks = res.data.remarks;

                }

            })
        },
        goBack() {
            uni.navigateBack({
                delta: 1
            });
        },





    }
}
</script>

<style lang="scss" scoped>
.list {
    height: 1450rpx;

    .list-item {
        display: flex;
        padding: 32rpx;
        border-bottom: 1rpx solid #E7E7E7;
        font-size: 32rpx;

        .item-title {
            padding-right: 10rpx;
            width: 162rpx;
            text-align: right;
        }

        .opinion {
            padding-left: 30rpx;
            width: auto;
        }

        .select {
            flex: 1;
            display: flex;
            justify-content: space-between;
        }
    }

    .item-content {
        display: flex;

        .pass {
            width: 200rpx;
            display: flex;
            justify-content: space-around;
        }

    }

    .unselected {
        color: rgba(0, 0, 0, 0.25);
    }

    .pselect {
        padding-left: 60rpx;
    }

    .textarea {
        height: 248rpx;
    }

    .textareaStyle {
        padding: 10rpx 60rpx !important;
    }

    .but {
        width: 540rpx;
        height: 90rpx;
        margin: 0 auto;
    }
}

/* 修改底部弹出层部分 */
.picker-container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 100;
}

.picker-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.picker-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.picker-header {
    display: flex;
    height: 53px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-bottom-width: 1px;
    border-bottom-color: #EEF2F9;
    margin-bottom: 30rpx;
}

.picker-title {
    font-size: 16px;
    color: #1D2129;
    font-weight: 400;
}

.picker-cancel,
.picker-confirm {
    font-size: 16px;
}

.picker-cancel {
    color: #86909C;
}

.picker-confirm {
    color: #165DFF;
}

.picker-list {
    padding: 24rpx 0;
    max-height: 350rpx;
}

.picker-item {
    display: flex;
    height: 44px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
}

.picker-item text {
    font-size: 16px;
    color: #1D2129;
}

/* 移除选中状态相关样式 */
.selected-icon {
    display: none;
}
</style>
